<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport"
    content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>AI_diagnosis_treament</title>
  <!-- <link rel="shortcut icon" href="favicon.ico" /> -->

  <link rel="stylesheet" href="../../css/common.css">
  <link rel="stylesheet" href="../../css/AI_diagnosis_treament.css">
  <link rel="stylesheet" href="../../css/bootstrap/bootstrap.min.css" />
  <link rel="stylesheet" href="../../css/toastr.min.css" />
  <link rel="stylesheet" href="../../css/vant.min.css" />
</head>

<body>
  <!-- 版心 -->
  <div id="main">

    <!-- 内容 -->
    <div class="content">

      <!-- 头部区域 -->
      <div class="head">
        <div class="row">
          <div class="col">
            <!-- 医生姓名 -->
            <div class="doctor-info">
              <div class="image">
                <div class="text">医生</div>
                <img src="../../images/doctor_image.png" title="医生" alt="doctor_image" />
              </div>
              <div class="id">
                <div class="text">{{patientInfo.doctorId}}</div>
                <div class="name">{{patientInfo.doctorName}}</div>
              </div>
            </div>
          </div>
          <div class="col">
            <!-- 患者姓名 -->
            <div class="patient-info">
              <div class="image">
                <div class="text">患者</div>
                <img src="../../images/patient_image.png" title="患者" alt="patient_image" />
              </div>
              <div class="id">
                <div class="text">{{decryption(patientInfo.patientId)}}</div>
                <div class="name">{{decryption(patientInfo.name)}}</div>
              </div>
            </div>
          </div>
        </div>
        <!-- 操作按钮组 -->
        <!-- <div class="action-btn-group">
          
        </div> -->

      </div>
      <!-- <div class="row addButtonGroup">
        <div class="col">
          <button type="button" id="select_patient" @click="changePatient">选择患者<svg viewBox="0 0 24 24">
              <path
                d="M20.118 3H3.893A2.914 2.914 0 0 0 1.39 7.371L9.506 20.92a2.917 2.917 0 0 0 4.987.005l8.11-13.539A2.914 2.914 0 0 0 20.117 3z" />
            </svg></button>
        </div>
      </div> -->
      <!-- <nav class="navbar navbar-expand-lg navbar-light">
        <div class="container-fluid">
          <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
            操作栏
          </button>
          <div class="collapse navbar-collapse mt-2" id="navbarNav">
            <div class="container">
              <div class="row justify-content-center">
                  <div class="col-12 col-sm-4 col-md-3 col-lg-2 mb-2">
                      <button @click="changePatient" class="btn btn-primary w-100">
                          选择患者
                      </button>
                  </div>
                  <div class="col-12 col-sm-4 col-md-3 col-lg-2">
                      <button @click="backList" class="btn btn-secondary w-100">
                         返回列表
                      </button>
                  </div>
              </div>
          </div>
          </div>
        </div>
      </nav> -->
      <div class="container">
        <div class="row justify-content-center">
          <!-- 新增按钮 -->
          <div class="col-6 col-sm-4 col-md-3 col-lg-2">
            <button @click="changePatient" class="btn btn-primary w-100">
              选择患者
            </button>
          </div>
          <!-- 详情按钮 -->
          <!-- <div class="col-4 col-sm-4 col-md-3 col-lg-2">
                <button @click="addPatient" class="btn btn-info w-100">
                    新增患者
                </button>
            </div> -->
          <!-- 返回按钮 -->
          <div class="col-6 col-sm-4 col-md-3 col-lg-2">
            <button @click="backList" class="btn btn-secondary w-100">
              返回列表
            </button>
          </div>
        </div>
      </div>
      <!--中间区域 -->
      <div class="medium">
        <div class="model_container" v-if="AIData.showName === 'none'">
          <div class="model_info">
            <div class="model_and_war">
              <!-- <div class="model" name="AImodel_name" v-if="AIData.isVisible != 'no'">{{AIData.showName}}模型</div> -->
              <div class="warmBtn" name="affirm_warm">
                <button type="button" @click="Confirmwarning" class="btn AIsubButton"
                  v-bind:class="{'btn-outline-danger': AIData.isConfirmWarning == 0 || AIData.isConfirmWarning == '', 'btn-secondary': AIData.isConfirmWarning == 1}"
                  :disabled="AIData.isConfirmWarning == 1">{{AIData.isConfirmWarning == 1 ? '已' : ''}}确认收到预警
                  <div class="spinner-grow text-danger" v-if="AIData.confirmColor == 'red'" role="status">
                    <span class="visually-hidden">Loading...</span>
                  </div>
                  <div class="spinner-grow text-warning" v-if="AIData.confirmColor == 'yellow'" role="status">
                    <span class="visually-hidden">Loading...</span>
                  </div>
                </button>
              </div>
            </div>
          </div>
          <div class="alert alert-danger AI_judgment" role="alert">
            本次试验按设计包含无模型对照组，属正常试验流程
          </div>
          <div class="alert alert-danger AI_judgment" role="alert">
            无模型辅助诊断，请直接填写诊断反馈和治疗方案
          </div>
        </div>
        <div class="model_container" v-else>
          <div class="model_info">
            <div class="model_and_war">
              <div class="model" name="AImodel_name" v-if="AIData.isVisible != 'no'">{{AIData.showName}}模型</div>
              <div class="warmBtn" name="affirm_warm">
                <button type="button" @click="Confirmwarning" class="btn AIsubButton"
                  v-bind:class="{'btn-outline-danger': AIData.isConfirmWarning == 0 || AIData.isConfirmWarning == '', 'btn-secondary': AIData.isConfirmWarning == 1}"
                  :disabled="AIData.isConfirmWarning == 1">{{AIData.isConfirmWarning == 1 ? '已' : ''}}确认收到预警
                  <div class="spinner-grow text-danger" v-if="AIData.confirmColor == 'red'" role="status">
                    <span class="visually-hidden">Loading...</span>
                  </div>
                  <div class="spinner-grow text-warning" v-if="AIData.confirmColor == 'yellow'" role="status">
                    <span class="visually-hidden">Loading...</span>
                  </div>
                </button>
              </div>
            </div>
            <div class="current" name="current_probability">模型诊断结果<span>{{AIData.diagnosis}}</span></div>
            <div class="current" name="current_probability">当前脓毒症发生概率<span>{{AIData.currentProbabilityOfSepsis ?
                (AIData.currentProbabilityOfSepsis * 100).toFixed(2) : AIData.currentProbabilityOfSepsis}}%</span></div>
            <div class="future" name="futuer_probability">未来3小时内脓毒症发生概率<span>{{AIData.next3hProbabilityOfSepsis ?
                (AIData.next3hProbabilityOfSepsis * 100).toFixed(2) : AIData.next3hProbabilityOfSepsis}}%</span></div>
          </div>
          <div class="AI_judgment" v-if="AIData.isVisible != 'no'">
            <!-- "model0hInterpretability":"string //0h模型可解释性,即解释主要采用哪个特征进行的预测",
			            "model3hInterpretability":"string //3h模型可解释性,即解释主要采用哪个特征进行的预测",btn-light -->
            <div style="overflow: hidden;">
              <div style="float: left;margin: 7px;" class="btn-group btn-group-sm" role="group"
                aria-label="Small button group">
                <input type="radio" class="btn-check" @click="modelHour(0)" name="btnradio" id="btnradio1"
                  autocomplete="off" checked>
                <label class="btn btn-outline-primary" for="btnradio1">当前患病</label>
                <input type="radio" class="btn-check" @click="modelHour(3)" name="btnradio" id="btnradio2"
                  autocomplete="off">
                <label class="btn btn-outline-primary" for="btnradio2">未来3小时患病</label>
              </div>
            </div>
            <div class="text">
              <h2>AI判断依据</h2>
              <div style="max-height: 20vh; overflow-y: auto;min-height: 10vh;" v-if="modelHourData == 0">
                <p v-if="AIData.model0hInterpretability.length" v-for="item in AIData.model0hInterpretability">
                  {{item.key + " " + item.value}}</p>
                <p v-if="!AIData.model0hInterpretability.length">无概率和可解释性</p>
                <!-- <p>白蛋白: 40.0g/L</p>
                <p>尿素: 3.30mmol/L</p>
                <p>最小级别</p>
                <p>降钙素原: 0.05ug/L</p>
                <p>白蛋白: 40.0g/L</p>
                <p>尿素: 3.30mmol/L</p>
                <p>最小级别</p>
                <p>降钙素原: 0.05ug/L</p>
                <p>白蛋白: 40.0g/L</p>
                <p>尿素: 3.30mmol/L</p>
                <p>最小级别</p> -->
              </div>
              <div style="max-height: 20vh; overflow-y: auto;min-height: 10vh;" v-if="modelHourData == 3">
                <p v-if="AIData.model3hInterpretability.length" v-for="item in AIData.model3hInterpretability">
                  {{item.key + " " + item.value}}</p>
                <p v-if="!AIData.model3hInterpretability.length">无概率和可解释性</p>
                <!-- <p>{{AIData.model3hInterpretability}}</p> -->
                <!-- <p>白蛋白: 40.0g/L</p>
                  <p>尿素: 3.30mmol/L</p>
                  <p>最小级别</p>
                  <p>降钙素原: 0.05ug/L</p>
                  <p>白蛋白: 40.0g/L</p>
                  <p>尿素: 3.30mmol/L</p>
                  <p>最小级别</p>
                  <p>降钙素原: 0.05ug/L</p>
                  <p>白蛋白: 40.0g/L</p>
                  <p>尿素: 3.30mmol/L</p>
                  <p>最小级别</p> -->
              </div>
            </div>
          </div>
        </div>

        <!--诊断反馈-->
        <div class="diagnosis">
          <p>当前诊断反馈</p>
          <!-- <div class="range">
            <div class="progress-bar">
              <input type="range" class="form-range" v-model="subtxt" min="0" max="100" step="1" id="customRange3">
            </div>
            <input type="text" id="diagnosis-feedback-progress-text" v-model="subtxt"><label>%</label>
            <button type="button">提交</button>
          </div> -->
          <div class="alert alert-danger" role="alert">
            为脓毒症的可能性占比
          </div>
          <div class="row mb-3">
            <div class="col-sm-8">
              <div class="alert alert-info">
                <input type="range" class="form-range mt-2" v-model="subtxt" min="0" max="100" step="1"
                  id="customRange3">
              </div>
            </div>
            <!-- <div class="col-sm-8"><input type="range" class="form-range mt-2" v-model="subtxt" min="0" max="100"
                step="1" id="customRange3"></div> -->
            <div class="col-sm-4">
              <div class="input-group alert alert-info">
                <!-- <input type="text"  aria-label="Dollar amount (with dot and two decimal places)"> -->
                <input type="text" class="form-control" v-model="subtxt">
                <span class="input-group-text">%</span>
                <button class="btn btn-primary AIButton" type="button" @click="subDiagnosticMsg">
                  <div
                    v-if="AIData.isContainDiagnosis == 0 && (AIData.confirmColor=='red' || AIData.confirmColor=='yellow')"
                    class="spinner-grow text-danger" role="status">
                    <span class="visually-hidden">Loading...</span>
                  </div>
                  提交
                </button>
                <!-- <button type="button" class="btn btn-primary">Primary</button> -->
              </div>
            </div>
          </div>
          <ol class="list-group list-group-numbered" style="max-height: 40vh;overflow-y: auto;">
            <li v-for="item in DiagnosticList" class="list-group-item d-flex justify-content-between align-items-start">
              <div class="ms-2 me-auto">
                <div class="col-3">
                  {{item.operationValue * 100}}%
                </div>
                <div class="col">
                  {{item.createdBy}}
                </div>
                {{item.operationTime}}
              </div>
              <span class="badge text-danger rounded-pill" @click="inspectiondel(item,1)">删除</span>
            </li>
          </ol>
        </div>

        <!-- 治疗方案 -->
        <div class="treatment-plan mt-2">
          <h2 style="font-size: 20px;text-align: center;font-weight: 700;">当前治疗方案</h2>
          <van-field style="margin-bottom: 5px;" v-model="treatmentPlan.medicalType" center clearable label="药品"
            placeholder="请输入药品名称">
            <template #button>
              <van-button size="small" @click="showmedicalType = true" type="primary">选择药品</van-button>
            </template>
          </van-field>
          <!-- 添加药品弹层 -->
          <van-popup v-model="showmedicalType" round position="bottom">
            <div style="padding: 10px">
              <van-search v-model="searchText" placeholder="搜索药品名称" @input="medicalFilter" />
            </div>
            <van-picker show-toolbar :columns="filteredColumns" value-key="medicalType"
              @cancel="showmedicalType = false" @confirm="onConfirm" />
          </van-popup>
          <van-row>
            <van-col span="16">
              <van-field style="margin-bottom: 5px;" v-model="treatmentPlan.drugSpecifications" type="number"
                label="用量" />
            </van-col>
            <van-col span="8">
              <van-dropdown-menu style="height: 44px !important;">
                <van-dropdown-item v-model="treatmentPlan.drugUnit" :options="option" />
              </van-dropdown-menu>
            </van-col>
          </van-row>
          <!-- 频次下拉框 -->
          <van-row>
            <van-col span="24">
              <van-field v-model="treatmentPlan.frequency" label="频次" value="选择频次" readonly>
                <template #button>
                  <van-button size="small" @click="showfrequency = true" type="primary">选择频次</van-button>
                </template>
              </van-field>
            </van-col>
            <!-- 添加频次弹层 -->
            <van-popup v-model="showfrequency" round position="bottom">
              <van-picker show-toolbar :columns="frequencyColumns" @cancel="showfrequency = false"
                @confirm="onConfirmfrequency" />
            </van-popup>
          </van-row>

          <!-- 以下药品废弃 -->
          <div class="medicine">
            <!-- <div class="pill">
              <label>药品</label>
              <ul id="medicine-name-list" v-if="medicalListHide">
                <li class="item" v-for="item in medicalList" @click="medicalListHander(item)">{{ item.medicalType }}
                </li>
              </ul>
              <input type="text" v-model="treatmentPlan.medicalType" id="pill-name-input" @input="medicalFilter"
                @focus="medicalFocus" @blur="medicalBlur" />
            </div>
            <div class="count">
              <label>用量</label>
              <input type="number" v-model="treatmentPlan.drugSpecifications" min="0" />
              <select id="unit" v-model="treatmentPlan.drugUnit">
                <option value="box">盒</option>
                <option value="bottle">瓶</option>
                <option value="g">g</option>
                <option value="mg">mg</option>
                <option value="ml">ml</option>
                <option value="mm">mm</option>
                <option value="iu">iu</option>
              </select>
            </div> -->

            <!-- <div class="diluted-solution">
              <label class="left">药物稀释溶液</label>
              <select id="diluted-solution-select" @change="diluteHander" v-model="treatmentPlan.dilute">
                <option value="无">无</option>
                <option value="0.9%氯化钠注射液">0.9%氯化钠注射液</option>
                <option value="5%葡萄糖注射液">5%葡萄糖注射液</option>
                <option value="灭菌注射用水">灭菌注射用水</option>
              </select>
              <input id="diluted-solution-number" v-model="treatmentPlan.diluteSpecifications" />
              <label class="right">{{treatmentPlan.diluteUnit}}</label>
            </div> -->
            <button class="AIButton" type="submit" @click="subTreatmentPlan">
              <div class="spinner-grow text-danger"
                v-if="AIData.isContainTreatment == 0 && (AIData.confirmColor=='red' || AIData.confirmColor=='yellow')"
                role="status">
                <span class="visually-hidden">Loading...</span>
              </div>
              提交
            </button>
          </div>

          <ol class="list-group list-group-numbered" style="max-height: 50vh;overflow-y: auto;">
            <li v-for="item in TreatmentPlanList"
              class="list-group-item d-flex justify-content-between align-items-start">
              <div class="ms-2 me-auto">
                <div class="hstack gap-3">
                  <div class="">{{treatmentContentTiemSet(item.treatmentContent).medicalType}}</div>
                  <div class="">
                    {{treatmentContentTiemSet(item.treatmentContent).drugSpecifications}}{{treatmentContentTiemSet(item.treatmentContent).drugUnit}}
                  </div>
                </div>
                <div class="hstack gap-3">
                  <!-- <div class="">{{treatmentContentTiemSet(item.treatmentContent).dilute}}</div>
                  <div class="">{{treatmentContentTiemSet(item.treatmentContent).diluteSpecifications}}ml</div> -->
                  <div class="">频次：{{treatmentContentTiemSet(item.treatmentContent).frequency}}</div>
                </div>
                <div class="hstack">
                  <div class="">{{item.createdBy}}</div>
                </div>
                {{item.operationTime}}
              </div>
              <span class="badge text-danger rounded-pill" @click="inspectiondel(item,2)">删除</span>
            </li>
          </ol>
        </div>

      </div>

      <!-- 底部区域 -->
      <!-- <div class="bottom-area clearfix">
		  <div class="left">
			<button type="button" @click="updatePatientdiagnosisMsg"
					:disabled="patientInfo.isDiagnosedWithSepsis == 1">已确诊停止监测</button>
		  </div>
		  <div class="right">
			<button type="button" @click="updatePatientdischargeMsg"
					:disabled="patientInfo.isPatientDischarged == 1">已出院停止监测</button>
			<button type="button" @click="updatePatientdieMsg"
					:disabled="patientInfo.isPatientDie == 1">已死亡停止监测</button>
		  </div>
		</div> -->

      <div class="d-grid gap-2">
        <button class="btn btn-info timeButton" type="button" @click="updatePatientdiagnosisMsg"
          :disabled="patientInfo.isDiagnosedWithSepsis == 1">已确诊停止监测<span>{{patientInfo.diagnosedTime}}</span></button>
        <button class="btn btn-info timeButton" type="button" @click="updatePatientdischargeMsg"
          :disabled="patientInfo.isPatientDischarged == 1">已出院停止监测<span>{{patientInfo.dischargedTime}}</span></button>
        <button class="btn btn-info timeButton" type="button" @click="updatePatientdieMsg"
          :disabled="patientInfo.isPatientDie == 1">已死亡停止监测<span>{{patientInfo.dieTime}}</span></button>
      </div>
    </div>
    <!-- 页脚 -->
    <div id="footer">
      <a href="basicInfo.html">基础信息</a>
      <a href="biochemical_signs.html">生化及体征</a>
      <a href="javascript:;" class="active">AI预警</a>
      <a href="reviewdata.html">其它信息录入</a>
    </div>
    <!-- 切换患者 -->
    <div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1"
      aria-labelledby="staticBackdropLabel" aria-hidden="true">
      <div class="modal-dialog modal-dialog-scrollable">
        <div class="modal-content">
          <div class="modal-header">
            <h1 class="modal-title fs-5" id="staticBackdropLabel">选择患者</h1>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
          <div class="modal-body">
            <ol class="list-group list-group-numbered">
              <li @click="changePatientHander(item)" v-for="item in AllPatientList" v-show="!item.is_finished"
                class="list-group-item d-flex justify-content-between align-items-start"
                v-bind:class="{ active: item.patientInfoId == patientInfo.patientInfoId}">
                <div class="ms-2 me-auto">
                  <div class="fw-bold">{{decryption(item.patientId)}}</div>
                  {{decryption(item.name)}}<span v-if="item.isDiagnosedWithSepsis == '1' || item.isPatientDischarged == '1' || item.isPatientDie == '1'">✔</span>
                </div>
              </li>
            </ol>
          </div>
        </div>
      </div>
    </div>
    <!-- 二次确认 -->
    <!-- !-- 模态框（二次确认） -->
    <div class="modal fade" id="confirmModaldel" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
      aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <h4 class="modal-title" id="myModalLabel">确认操作</h4>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
          <div class="modal-body">
            您确定要执行此操作吗？
          </div>
          <div class="modal-footer">
            <!-- <button type="button" class="btn btn-default" data-dismiss="modal">取消</button> -->
            <button type="button" class="btn btn-primary" @click="todel">确认</button>
          </div>
        </div>
      </div>
    </div>
  </div>
  <style>
    .van-dropdown-menu__bar {
      height: 44px !important;
    }
    .timeButton{
      position: relative;
    }
    .timeButton span{
      position: absolute;
      font-size: 0.75rem;
      right: 0.2rem;
      top: 0.5rem;
    }
  </style>
  <script type="text/javascript" src="../../js/tool/vue.js"></script>
  <script type="text/javascript" src="../../js/tool/vant.min.js"></script>
  <script type="text/javascript" src="../../js/tool/jquery.js"></script>
  <script type="text/javascript" src="../../js/tool/dayjs.min.js"></script>
  <script type="text/javascript" src="../../js/tool/toastr.min.js"></script>
  <script type="text/javascript" src="../../js/common.js"></script>
  <script type="text/javascript" src="../../js/mixin.js"></script>
  <script type="text/javascript" src="../../js/AI_diagnosis_treament.js"></script>
  <script type="text/javascript" src="../../js/tool/bootstrap.min.js"></script>
</body>

</html>